<!--
 * @Author: zhouwr 1551541860@qq.com
 * @Date: 2024-02-17 20:42:20
 * @LastEditors: zhouwr 1551541860@qq.com
 * @LastEditTime: 2024-02-21 21:21:19
 * @FilePath: /jeecgboot-vue3/src/views/activiti/model/components/ActModelXmlView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE11111
-->
<template>
  <a-modal :title="title + '[' + modelKey + '.bpmn20.xml]'" :width="width" :visible="visible" @ok="handleOk" @cancel="handleCancel" okText="下载到本地" cancelText="关闭">
    <div style="margin: 10px">
      <CodeEditor v-model:value="xmlContent" :mode="'htmlmixed'" :readonly="true" />
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { getModelXml } from '../ActModel.api'
  import { CodeEditor } from '@/components/CodeEditor'

  const title = ref<string>('流程模板xml内容')
  const width = ref<number>(800)
  const visible = ref<boolean>(false)

  const xmlContent = ref<string>()
  const modelKey = ref<string>()

  /**
   * 加载Xml
   */
  function viewXml(record) {
    modelKey.value = record.key
    visible.value = true
    getModelXml({ id: record.id }, (res) => {
      xmlContent.value = res.xmlContent
    })
  }

  /**
   * 确定按钮点击事件
   */
  function handleOk() {
    const text = xmlContent.value
    const blob = new Blob([text], { type: 'text/plain' })
    const anchor = document.createElement('a')
    anchor.download = modelKey.value + '.bpmn20.xml'
    anchor.href = window.URL.createObjectURL(blob)
    anchor.target = '_blank'
    anchor.style.display = 'none' // just to be safe!
    document.body.appendChild(anchor)
    anchor.click()
    document.body.removeChild(anchor)
  }

  /**
   * 取消按钮回调事件
   */
  function handleCancel() {
    visible.value = false
  }

  defineExpose({
    viewXml,
  })
</script>

<style lang="less" scoped></style>
